@import "common";
li{
    list-style: none;
}
.wrap{
    height: r(1199.9px);
}
.banner{
    font-size: 0;
    position: relative;
    >img{
        width: r(640px);
        height: r(321px);
       
    }
     .mask{
            width: r(640px);
            height: r(91px);
            position: absolute;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            .text{
                color: white;
                 width: r(198px);
                height: r(53px);
                margin: {
                    top:r(16px);
                    left: r(28px);
                };
                .big{
                    font-size:r(26px) ;
                    
                }
                .small{
                    font-size: r(22px);
                }
            }
            .date-view{
                 width: r(225px);
                height: r(24px);
                margin-top: r(52px);
                margin-right: r(29px);
                li{
                    float: left;
                    display: block;
                   
                }
                color: white;
                 
                .date{
                   font-size: r(17.86px);
                   margin-right: r(16px);
                }
                .view{
                    vertical-align: middle;
                    font-size: r(17.86px);
                    .icon-view{
                        font-size: r(26px);
                    }
                }
            }
        }
}
section{
    font-size: 0;
    width: r(581px);
    height: r(672px);
    padding-top: r(22px);
    .list-item{
        width: r(581px);
        height: r(173px);
        
        border-bottom: 1px solid #cecece;
        &:nth-of-type(2),&:nth-of-type(3){
            margin-top: r(38px);
        }
        >img{
            width: r(209px);
             height: r(141px);
        }
        .detail{
            padding-left: r(15px);
            float: right;
            width: r(355px);
            height: r(173px);
            .title{
              font-size: r(26px);
              margin-bottom: r(12px);
            }
        }
        .introduce{
             width: r(340px);
             height: r(50px);
             color: $icon-color;
             font-size: r(22px);
        }
         .date-view{
            
                 width: r(170px);
                height: r(24px);
                margin-top: r(30px);
               
                li{
                    float: left;
                    display: block;
                   
                }
                color: #939393;
                 
                .date{
                   font-size: r(17.86px);
                   margin-right: r(16px);
                }
                .view{
                    vertical-align: middle;
                    font-size: r(17.86px);
                    .icon-view{
                        font-size: r(26px);
                    }
                }
            }
    }
    .loadmore{
        width: r(581px);
        height: r(73px);
        border-top: 1px solid #cecece;
        color: $icon-color;
        text-align: center;
        line-height: r(73px);
        >P{
            font-size: r(22px);
            
        }
    }
}
